
@mixin borderRadius($radius){
  border-radius : $radius;
  -webkit-border-radius : $radius;
  -moz-border-radius : $radius;
}
.check-group{
  position: relative;
  &.inline-group{
    display: inline-block;
    min-width : 60px;
  }
  //
  //.regular-radio {
  //  display: none;
  //}

  //.regular-radio + label {
  //  -webkit-appearance: none;
  //  border: 1px solid #4671ce;
  //  @include px1rem(padding,18);
  //  @include px1rem(border-radius,50);
  //  display: inline-block;
  //  position: relative;
  //  top : 0;
  //}

  label {
    -webkit-appearance: none;
    border: 1px solid #4671ce;
    padding : 8px;
    @include borderRadius(25px);
    display: inline-block;
    position: relative;
    top : 0;
  }

  //.regular-radio:checked + label:after {
  //  content: ' ';
  //  @include px1rem(width,20);
  //  @include px1rem(height,20);
  //  @include px1rem(border-radius,60);
  //  position: absolute;
  //  @include px1rem(top,8);
  //  background: #4671ce;
  //  text-shadow: 0px;
  //  @include px1rem(left,8);
  //  font-size: 0.47em;
  //}

  label.checked-label:after {
    content: ' ';
    width: 8px;
    height: 8px;
    border-radius : 30px;
    position: absolute;
    top : 4px;
    background: #4671ce;
    text-shadow: 0px;
    left : 4px;
    font-size: 0.47em;
  }

  label.checked-label {
    color: #99a1a7;
    border: 1px solid #4671ce;
  }
}

//html demo 1 ： normal
//<div class="check-group">
//  <input type="radio" id="test1" name="test" class="regular-radio" checked="checked" /><label for="test1"></label>
//  <span>顺丰快递</span>
//</div>
//<div class="check-group">
//  <input type="radio" id="test2" name="test" class="regular-radio" checked="checked" /><label for="test2"></label>
//  <span>顺丰快递</span>
//</div>

//html demo 2 : inline group
//<div class="check-group inline-group">
//  <input type="radio" id="test3" name="test2" class="regular-radio" checked="checked" /><label for="test3"></label>
//  <span>顺丰快递</span>
//</div>
//<div class="check-group inline-group">
//  <input type="radio" id="test4" name="test2" class="regular-radio" checked="checked" /><label for="test4"></label>
//  <span>顺丰快递</span>
//</div>